<template>
    <div class="collectionContainer">
        <div class="myCollectionContent">
            <div class="back" @click="goBack"></div>
            <p class="title">我的收藏 {{ collections.length }}</p>
            <div class="setting" @click="isShow=!isShow">管理</div>
        </div>
        <div class="collectionContent">
            <ul class="collections">
                <li v-for="collection in collections" :key="collection.id">
                    <div class="collection" :style="isShow?'width:7.2rem':'width:6.86rem'">
                        <div class="check" v-if="isShow" @click="cancelCollect(collection.id)" :style="collection.cancel ? actionStyle:''">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="collectionImg"></div>
                        <div class="collectionInfo">
                            <div class="tell">
                                <p class="tellTitle">{{ collection.title }}</p>
                                <p class="tellContent">{{ collection.tell }}</p>
                            </div>
                            <div class="userInfo">
                                <p class="name">{{ collection.user }}</p>
                                <p class="firstTime" v-if="ifShow(collection.id)">{{ collectionTime(collection.id) }}天前</p>
                                <p class="secondTime" v-if="!ifShow(collection.id)">{{ collectionMonth(collection.id) }}-{{ collectionDay(collection.id) }}</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="checkAllContainer" v-if="isShow">
            <div class="checkAllContent">
                <div class="checkAll">
                    <div class="check" @click="checkAll" :style="checkAllShow ? actionStyle:''">
                        <i class="fas fa-check"></i>
                    </div>
                    <p class="checkTitle">全选</p>
                </div>
                <p class="gotoCancel" @click="confirmCancel">取消收藏</p>
            </div>
        </div>
    </div>
</template>


<script>
    export default {
        name:'myCollection',
        data(){
            return{
                collections:[
                    {id:0,title:'分享一下我改善多囊卵巢的经验',tell:'我不久前才查出有多囊卵巢，现在来分享',user:'hhhin',time:'03-05',cancel:false},
                    {id:1,title:'帖子',tell:'经验分享',user:'三分',time:'03-04',cancel:false},
                    {id:2,title:'大家去医院检查花了多少钱',tell:'过几天准备去医院检查，想问大家都花了',user:'kakakoo',time:'01-02',cancel:false}
                ],
                isShow:false,
                checkAllShow:false,
                actionStyle:{
                    color:'#FFF',
                    backgroundColor:'rgb(42, 130, 228)',
                    border:'1px solid rgb(42, 130, 228)'
                }
            }
        },
        methods:{
            cancelCollect(id){
                for(let i=0;i<this.collections.length;i++){
                    if(id===this.collections[i].id){
                        this.collections[i].cancel=!this.collections[i].cancel
                    }
                }
            },
            goBack(){
                this.$router.back()
            },
            ifShow(id){
                let myDate=new Date()
                let nowDay=''
                if(myDate.getDate()<10){
                    nowDay='0'+myDate.getDate()
                }
                else{
                    nowDay=''+myDate.getDate()
                }
                let nowMonth=''
                if((myDate.getMonth()+1)<10){
                    nowMonth='0'+(myDate.getMonth()+1)
                }
                else{
                    nowMonth=(myDate.getMonth()+1)
                }
                for(let i=0;i<this.collections.length;i++){
                    if(id===this.collections[i].id){
                        let collectDay=(this.collections[i].time.split('-'))[1]
                        let collectMonth=(this.collections[i].time.split('-'))[0]
                        if(nowMonth-collectMonth>0) return false
                        else if(nowMonth-collectMonth<=0){
                            if(nowDay-collectDay<=7) return true
                            else return false
                        }
                    }
                }
            },
            checkAll(){
                if(this.checkAllShow===false){
                    for(let i=0;i<this.collections.length;i++){
                        this.collections[i].cancel=true
                    }
                }
                else if(this.checkAllShow===true){
                    for(let i=0;i<this.collections.length;i++){
                        this.collections[i].cancel=false
                    }
                }
                this.checkAllShow=!this.checkAllShow
            },
            confirmCancel(){
                let arr=[]
                for(let i=0;i<this.collections.length;i++){
                    if(this.collections[i].cancel!==true){
                        arr.push(this.collections[i])
                    }
                }
                this.collections=arr
            }
        },
        computed:{
            collectionTime(){
                let myDate=new Date()
                let nowDay=''
                if(myDate.getDate()<10){
                    nowDay='0'+myDate.getDate()
                }
                else{
                    nowDay=''+myDate.getDate()
                }
                return (id)=>{
                    for(let i=0;i<this.collections.length;i++){
                        if(id===this.collections[i].id){
                            let collectDay=(this.collections[i].time.split('-'))[1]
                            return (''+(nowDay-collectDay))
                        }
                    }
                }
            },
            collectionMonth(){
                return (id)=>{
                    for(let i=0;i<this.collections.length;i++){
                        if(id===this.collections[i].id){
                            let collectMonth=(this.collections[i].time.split('-'))[0]
                            return collectMonth;
                        }
                    }
                }
            },
            collectionDay(){
                return(id)=>{
                    for(let i=0;i<this.collections.length;i++){
                        if(id===this.collections[i].id){
                            let collectDay=(this.collections[i].time.split('-'))[1]
                            return collectDay
                        }
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .collectionContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .myCollectionContent{
        width: 6.86rem;
        height: 1.76rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .back{
        background-image: url(../assets/img/6-icon@2x/back.png);
        width: .32rem;
        margin-right: .48rem;
        height: 0.32rem;
        background-position: center;
        background-size: contain;
    }
    .title{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .36rem;
    }
    .setting{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgb(229, 229, 229);
        font-family: 'PingFangSC-Regular';
        color:#333333;
        font-size: .24rem;
        width: .8rem;
        height: .46rem;
        border-radius: .4rem;
    }
    .collectionContent{
        width: 100%;
    }
    .collections{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }
    .collection{
        margin-bottom: .2rem;
        display: flex;
        align-items: center;
    }
    .check{
        margin-right: .1rem;
        width: .4rem;
        height: .4rem;
        border-radius: 50%;
        border: 1px solid #333333a9;
        color:#33333373;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
        transition: all 0.5s;
    }
    .collectionImg{
        background-color: #FFF;
        width: 1.6rem;
        height: 1.6rem;
        border-radius: .2rem;
    }
    .collectionInfo{
        margin-left: .2rem;
        width: 4.6rem;
        height:1.6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .tell{
        display: flex;
        flex-direction: column;
    }
    .tellTitle{
        font-family: 'PingFangSC-Mediuem';
        color: #333333;
        font-size: 16px;
    }
    .tellContent{
        font-family: 'PingFangSC-Regular';
        color:#999999;
        font-size: .24rem;
        margin-top: .06rem;
    }
    .userInfo{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: 'PingFangSC-Regular';
        color:#999999;
        font-size: .26rem;
    }
    .checkAllContainer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .checkAllContent{
        width: 6.86rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
    }
    .checkAll{
        display: flex;
        align-items: center;
    }
</style>